<template>
  <el-space wrap>
    <el-card v-for="item in iconList" :key="item">
      <template #header>
        <svg-icon :name="item" :myStyle="myStyle"></svg-icon>
      </template>
      {{ item }}
    </el-card>
  </el-space>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "Icon",
  setup() {
    const state = reactive({
      iconList: [] as any,
      myStyle: {
        fontSize: "56px",
      },
    });

    const files = require.context("@/assets/icons/imgs", false, /\.svg$/);
    state.iconList = files.keys().map((path: any) => {
      return files(path).default.id;
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style scope>
</style>